<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>车辆位置-江城巴士</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    
    <link rel="stylesheet" href="css/app.css">
</head>

<body>

<header>
    <div class="title">车辆位置</div>
</header>


<section class="wrap location-box">
    <div class="slide-wrap">
        <div class="hd">
            <span><img src="images/file.png" />车辆信息</span>
        </div>
        <div class="slide">
            <ul>
                <li>
                    <div class="avatar">
                        <img src="images/bus_avatar.jpg" />
                        <span>鄂TF0809</span>
                    </div>
                    <div class="detail">
                        <em>司机姓名</em>
                        <span>王华</span>
                        <em>司机电话</em>
                        <span>18812354845</span>
                        <div class="col">
                            <em>品牌</em>
                            <span>东风日产</span>
                        </div>
                        <div class="col">
                            <em>车型</em>
                            <span>东风gpasd11</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="avatar">
                        <img src="images/bus_avatar.jpg" />
                        <span>鄂TF0809</span>
                    </div>
                    <div class="detail">
                        <em>司机姓名</em>
                        <span>王华</span>
                        <em>司机电话</em>
                        <span>18812354845</span>
                        <div class="col">
                            <em>品牌</em>
                            <span>东风日产</span>
                        </div>
                        <div class="col">
                            <em>车型</em>
                            <span>东风gpasd11</span>
                        </div>
                    </div>
                </li>
            </ul>    
        </div>
    </div>

    <div class="hd">
        <span><img src="images/road.png" />发车线路</span>
        <em>实时线路</em>
    </div>
    <div class="location">
        <ul id="line">
            <li>
                <i class="arrow"></i>
                <em>武丰村</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>园林路瑞丰路</em>
            </li>
            <li class="current">
                <i class="arrow"></i>
                <em>园林路钢都花园</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>友谊大道柴林花园</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>友谊大道华城广场</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>友谊大道铁机路</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>友谊大道才茂街</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>友谊大道才华街</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>徐东大街徐东村</em>
            </li>
            <li>
                <i class="arrow"></i>
                <em>徐东大街汪家墩</em>
            </li>
        </ul>
    </div>

    <div class="departure">
        <h2><img src="images/clock.png" />发车时间</h2>

        <dl>
            <dd class="time1">
                <span><em>7:30</em></span>
                <span><em>8:30</em></span>
                <span><em>9:30</em></span>
                <span><em>10:30</em></span>
                <span><em>11:30</em></span>
                <span><em>11:30</em></span>
                <span><em>11:30</em></span>

                <span class="fix"></span>
                <span class="fix"></span>
                <span class="fix"></span>
            </dd>
        </dl>


    </div>


    <div class="button">
        <button type="button" class="ubtn ubtn-blue" id="submit">预定座位</button>
    </div>
</section>


<script src="js/zepto.min.js"></script>
<script src="js/app.js"></script>
<script>
$(function() {
    var $line = $('#line'),
        count = $line.find('li').length;

        $('#line').width(56 * count - 10);

    $('.slide').each(function() {
            var $self = $(this),
                $nav,
                length = $self.find('li').length;

            if (length < 2) {
                return;
            }
            var nav = ['<div class="nav">'];
            for (var i = 0 ; i < length; i++) {
                nav.push( i === 0 ? '<i class="current"></i>' : '<i></i>');
            }
            nav.push('</div>');
            $self.append(nav.join(''));
            $nav = $self.find('i');

            $(this).swipeSlide({
                index : 0,
                continuousScroll : true,
                autoSwipe : false,
                lazyLoad : true,
                firstCallback : function(i,sum){
                    $nav.eq(i).addClass('current').siblings().removeClass('current');
                },
                callback : function(i,sum){
                    $nav.eq(i).addClass('current').siblings().removeClass('current');
                }
            });
        })
})
</script>

</body>
</html>